import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import "../Detail/Detail.less"
import { bindActionCreators } from 'redux';
import { actions,getDetaillist } from '../../store/modules/detail';
import { connect } from 'react-redux';
import qs from "qs";

export  class Detail extends Component {
 
  componentDidMount() {
    let {
      Detail:{
        reqgetgoodsinfo,
        changeObj,
      },
      
    }  = this.props;

    changeObj(qs.parse(this.props.location.search.slice(1)));

    reqgetgoodsinfo()
  }

  render() {
    let { detailList,Detail:{addshop} } = this.props
    return (
      detailList.length > 0 ? <div>
        <Header text="商品详情" back></Header>
        <div className='detailimg'>
          <img src={'http://localhost:1000' + detailList[0].img} alt="" />
        </div>
        <div>{detailList[0].goodsname}</div>
        <div>{detailList[0].description}</div>
        <div>{detailList[0].price}</div>
        <div className='btn' onClick={()=>addshop()}>加入购物车</div>
      </div> : null)
  }
}

const mapStateToProps = (state) => ({
  detailList:getDetaillist(state)
});

const mapDispatchToProps = (dispatch) => {
  return {
    Detail: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Detail);